import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Tabs } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons'
import './OrderTabs.css';

const OrderTabs = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const tabs = [
    { key: 'all', title: '全部订单', path: '/TotalMenu' },
    { key: 'pending', title: '待支付', path: '/Daizhifu' },
    { key: 'checkin', title: '待入住', path: '/Dairuzhu' },
    { key: 'staying', title: '入住中', path: '/Ruzhuzhong' },
    { key: 'checkout', title: '已退房', path: '/Yituifang' }
  ];

  // 根据当前路径获取活动标签
  const getActiveTab = () => {
    const currentPath = location.pathname;
    const tab = tabs.find(tab => tab.path === currentPath);
    return tab ? tab.key : 'all';
  };

  const handleTabChange = (key) => {
    const tab = tabs.find(tab => tab.key === key);
    if (tab) {
      navigate(tab.path);
    }
  };

  return (
    <div className="order-tabs">
      <div className="header">
        <span>
          <LeftOutline style={{ marginRight: '0.25rem', marginLeft: '0.25rem' }} onClick={() => navigate('/tabber/my')}/>
        </span>
        <span onClick={() =>navigate('/tabber/my') }>返回</span>
        <span className="title">酒店订单</span>
      </div>
      <Tabs
      className='xmhTabs'
        activeKey={getActiveTab()}
        onChange={handleTabChange}
        scrollable
      >
        {tabs.map(tab => (
          <Tabs.Tab title={tab.title} key={tab.key} />
        ))}
      </Tabs>
    </div>
  );
};

export default OrderTabs; 